<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data">
      <span slot="action" slot-scope="value,scope, index">
        <p>{{ value }}+444</p>
        <p>{{ scope }}+555</p>
        <a @click="handleEdit(value,scope,index)">编辑</a>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name',// dataIndex的值对应的是，列数据在数据项中对应的 key 
    key: 'name',// 如果dataIndex属性值唯一，则可以不设置key属性
    align: 'left'
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    width: '30%',
    scopedSlots: { customRender: 'action' }, //这一行自定义渲染这一列
    align: 'center'
  }
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park'
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park'
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park'
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park'
  }
]

export default {
  name: 'HelloWorld',
  data(){
    return {
      columns,
      data
    }
  },
  methods: {
    handleEdit(...res){
      console.log(...res)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
